<template>
  <div>
    <button @click="turn">跳转首页</button>
    <hr>
    <!-- 父传子 -->
    <fly-one :price="myprice" :myname="myname"
    @sendhob="getData"></fly-one>
    <hr>
    <h1>{{zdata}}</h1>
    <hr>
    <fly-two></fly-two>
  </div>
</template>

<script >
// vue3的编程式导航  跳转和获取参数
// $router和$route的区别
import flyOne from './flyOne.vue'
import flyTwo from './flyTwo.vue'
import {ref,provide} from 'vue'
import {useRouter,useRoute} from 'vue-router';
  export default {
      components:{flyOne,flyTwo},
      setup(){
        // 获取编程式跳转对象
          let router=useRouter();
          // 跳转首页
            let turn=()=>{
                // router.push("/home")
                router.push({name:'home',query:{cid:888}})
                // router.go()
                // router.replace()
            }
            let myprice=ref(8899)
            let myname=ref("麦克阿瑟")
            // 子传父的事件函数
            let zdata=ref('')
          let getData=(val)=>{
            // val--子传父的数据
            console.log(val)
            zdata.value=val;
          }
          // provide('key',值)
           let msg=ref("我是你爷爷");
           provide('msg',msg.value)
          return {  
            turn,
            myprice,
            myname,
            getData,
            zdata
          }
      }
  }
</script>
